<template>
  <div>
     <form action="">
       <div class="form">      
           <input type="text" name="uname" placeholder="Search here..."><button>SEARCH</button>        
       </div>
    </form>
  </div>  
</template>

<script>
    export default {
        
    }
</script>

<style scoped>
     *{
            margin:auto;
            padding:0;
        }
        .form{
            width: 454px;
            height: 42px;
            
            padding:15px;
            border:none;
            border-radius:5px;          
        }
        input{
            width: 342px;
            height: 42px;
            background-color: #eeeeee;
            border:none;
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
            font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
            font-style:italic;
        }
        button{
            /*display:inline-block;*/
            width:112px;
            height: 42px;
            background-color:#d93c3c;
            color:#fff;
            border:none;
            border-top-right-radius:5px;
            border-bottom-right-radius:5px;
            position: relative;
            font-size:16px;
            font-weight: bold;
        }
        /*使用伪类来添加三角符号*/
        button:before{
            content:"";
            border-width:6px;
            border-style:solid;
            border-color: transparent #d93c3c transparent transparent;
            position: absolute;
            right:100%;
            top:38%;
        }

</style>